<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="班级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classId">
              <j-dict-select-tag type="list" v-model="model.classId" dictCode="sk_class,class_name,id,del_flag = 0 order by sort_no asc" placeholder="请选择班级" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="交接日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handoverDate">
              <j-date placeholder="请选择交接日期" v-model="model.handoverDate"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="交接时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handoverTime">
              <a-time-picker v-model="model.handoverTime" value-format="hh:mm:ss" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="入园儿童数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="studentNumber">
              <a-input-number  v-model="model.studentNumber" :min="0" :precision="0" placeholder="请输入入园儿童数" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="交接儿童数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handoverNumber">
              <a-input-number v-model="model.handoverNumber" :min="0" :precision="0" placeholder="请输入交接儿童数" style="width: 100%" @change="inputHandoverNumber"/>
              <div style="color:#f00;" v-if="canLentNumShow">交接儿童数量不能超过入园儿童数量！</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="交班人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handoverTeacherId">
              <a-select v-model="model.handoverTeacherId" placeholder="请选择交班人">
                <a-select-option v-for="item in teacherList" :key="item.id" :value="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="接班人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receiveTeacherId">
              <a-select v-model="model.receiveTeacherId" placeholder="请选择接班人">
                <a-select-option v-for="item in teacherList" :key="item.id" :value="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="其他交接班内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" rows="4" placeholder="请输入其他交接班内容" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'SkHandoverRecordForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        teacherList:[],
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           classId: [
              { required: true, message: '请选择班级!'},
           ],
           handoverDate: [
              { required: true, message: '请输入交接日期!'},
           ],
           handoverTime: [
              { required: true, message: '请输入交接时间!'},
           ],
           studentNumber: [
              { required: true, message: '请输入入园儿童数!'},
           ],
           handoverNumber: [
              { required: true, message: '请输入交接儿童数!'},
           ],
           handoverTeacherId: [
              { required: true, message: '请输入交班人!'},
           ],
           receiveTeacherId: [
              { required: true, message: '请输入接班人!'},
           ],
        },
        url: {
          add: "/management/skHandoverRecord/add",
          edit: "/management/skHandoverRecord/edit",
          queryById: "/management/skHandoverRecord/queryById"
        },
        canLentNumShow:false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getTeacher();
    },
    methods: {
      // 可借数量不能大于总数量
      inputHandoverNumber(){
        if (this.model.handoverNumber > this.model.studentNumber || !this.model.studentNumber && this.model.handoverNumber) {
          this.canLentNumShow = true;
          return 
        }
        this.canLentNumShow = false;
      },
      getTeacher(){
        let url = "/management/teacher/list"
        getAction(url).then((res)=>{
          if(res.success){
            this.teacherList = res.result;
          } else {
            this.$message.warning(res.message);
          }
        }).catch((error)=>{
          console.error(error);
        })
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        if (this.canLentNumShow) {
          return
        }
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            this.$emit("modelLoading",that.confirmLoading)
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              this.$emit("modelLoading",that.confirmLoading)
            })
          }
         
        })
      },
    }
  }
</script>